<template>
  <el-dialog
    title="查看下级"
    v-model="visible"
    width="70%"
    @close="handleClose"
  >
    <el-table
      :data="list"
      border
      class="table"
      header-cell-class-name="table-header"
      row-key="id"
      lazy
      :load="loadChildren"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="mobile"
        label="手机号"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="用户ID"
        min-width="250"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="用户等级" align="center" min-width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.memberName">{{
            scope.row.memberName
          }}</el-tag>
          <span v-else style="color: #909399">暂无等级</span>
        </template>
      </el-table-column>
      <el-table-column label="是否有下级" align="center" width="110">
        <template #default="scope">
          <el-tag v-if="scope.row.hasChildren" type="success" size="small"
            >是</el-tag
          >
          <el-tag v-else type="info" size="small">否</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { api } from "../../../api/index";

export default {
  name: "SubordinatesDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
      default: "",
    },
  },
  emits: ["update:modelValue"],
  data() {
    return {
      list: [],
      treeList: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:modelValue", val);
      },
    },
  },
  watch: {
    userId: {
      handler(val) {
        if (val && this.visible) {
          this.loadData();
        }
      },
      immediate: true,
    },
    visible(val) {
      if (val && this.userId) {
        this.loadData();
      }
    },
  },
  methods: {
    loadData() {
      api("/admin/subscribers/subN", {
        userId: this.userId,
      }).then((res) => {
        this.list = res.data || [];
      });
    },
    // 树形表格懒加载
    loadChildren(tree, treeNode, resolve) {
      api("/admin/subscribers/subN", {
        userId: tree.id,
      }).then((res) => {
        this.treeList = res.data || [];
      });
      setTimeout(() => {
        resolve(this.treeList);
      }, 1000);
    },
    handleClose() {
      this.visible = false;
      this.list = [];
      this.treeList = [];
    },
  },
};
</script>

<style scoped>
.table {
  width: 100%;
  font-size: 14px;
}
</style>
